<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix='fmt' %>
<link rel="stylesheet" href=" ${pageContext.request.contextPath}/static/adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href=" ${pageContext.request.contextPath}/static/adminlte/bower_components/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href=" ${pageContext.request.contextPath}/static/adminlte/bower_components/Ionicons/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href=" ${pageContext.request.contextPath}/static/adminlte/dist/css/AdminLTE.min.css">
<link rel="stylesheet" href=" ${pageContext.request.contextPath}/static/adminlte/dist/css/skins/_all-skins.min.css">

<!-- Morris chart -->
<link rel="stylesheet" href=" ${pageContext.request.contextPath}/static/adminlte/bower_components/morris.js/morris.css">
<!-- jvectormap -->
<link rel="stylesheet" href=" ${pageContext.request.contextPath}/static/adminlte/bower_components/jvectormap/jquery-jvectormap.css">
<!-- Date Picker -->
<link rel="stylesheet" href=" ${pageContext.request.contextPath}/static/adminlte/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
<!-- Daterange picker -->
<link rel="stylesheet" href=" ${pageContext.request.contextPath}/static/adminlte/bower_components/bootstrap-daterangepicker/daterangepicker.css">
<!-- bootstrap wysihtml5 - text editor -->
<link rel="stylesheet" href=" ${pageContext.request.contextPath}/static/adminlte/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">

<!-- fullCalendar -->
<link rel="stylesheet" href=" ${pageContext.request.contextPath}/static/adminlte/bower_components/fullcalendar/dist/fullcalendar.min.css">
<link rel="stylesheet" href=" ${pageContext.request.contextPath}/static/adminlte/bower_components/fullcalendar/dist/fullcalendar.print.min.css" media="print">
<c:set var="title" value="日历界面"/>
<%@include file="common/adminHeader.jsp" %>
<c:set var="light" value="3"/>
<%@include file="../../pages/common/header.jsp" %>
<%@include file="../../pages/common/mune.jsp"%>
<%--<%@include file="common/adminNavigator.jsp" %>--%>

<body class="hold-transition skin-green sidebar-mini">
<div class="container" style="margin-left: 250px " >
    <ol class="breadcrumb">
        <li>日历界面</li>
    </ol>


    <!-- Left col -->
    <section class="col-lg-7 connectedSortable">

        <div class="box box-solid bg-green-gradient">
            <div class="box-header ui-sortable-handle" style="cursor: move; ">
                <i class="fa fa-calendar"></i>

                <h3 class="box-title">日历</h3>

            </div>
            <!-- /.box-header -->
            <div class="box-body no-padding">
                <!--The calendar -->
                <div id="calendar" style="width: 100%"></div>
            </div>


        </div>

    </section>
    <!-- /.Left col -->



</div>

<script>
    $(function () {

        /* initialize the external events
         -----------------------------------------------------------------*/
        function init_events(ele) {
            ele.each(function () {

                // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
                // it doesn't need to have a start or end
                var eventObject = {
                    title: $.trim($(this).text()) // use the element's text as the event title
                }

                // store the Event Object in the DOM element so we can get to it later
                $(this).data('eventObject', eventObject)

                // make the event draggable using jQuery UI
                $(this).draggable({
                    zIndex        : 1070,
                    revert        : true, // will cause the event to go back to its
                    revertDuration: 0  //  original position after the drag
                })

            })
        }

        init_events($('#external-events div.external-event'))

        /* initialize the calendar
         -----------------------------------------------------------------*/
        //Date for the calendar events (dummy data)
        var date = new Date()
        var d    = date.getDate(),
            m    = date.getMonth(),
            y    = date.getFullYear()
        $('#calendar').fullCalendar({
            header    : {
                left  : 'prev,next today',
                center: 'title',
                right : 'month,agendaWeek,agendaDay'
            },
            buttonText: {
                today: 'today',
                month: 'month',
                week : 'week',
                day  : 'day'
            },
            //Random default events

            editable  : true,
            droppable : true, // this allows things to be dropped onto the calendar !!!
            drop      : function (date, allDay) { // this function is called when something is dropped

                // retrieve the dropped element's stored Event Object
                var originalEventObject = $(this).data('eventObject')

                // we need to copy it, so that multiple events don't have a reference to the same object
                var copiedEventObject = $.extend({}, originalEventObject)

                // assign it the date that was reported
                copiedEventObject.start           = date
                copiedEventObject.allDay          = allDay
                copiedEventObject.backgroundColor = $(this).css('background-color')
                copiedEventObject.borderColor     = $(this).css('border-color')

                // render the event on the calendar
                // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
                $('#calendar').fullCalendar('renderEvent', copiedEventObject, true)

                // is the "remove after drop" checkbox checked?
                if ($('#drop-remove').is(':checked')) {
                    // if so, remove the element from the "Draggable Events" list
                    $(this).remove()
                }

            }
        })

        /* ADDING EVENTS */
        var currColor = '#3c8dbc' //Red by default
        //Color chooser button
        var colorChooser = $('#color-chooser-btn')
        $('#color-chooser > li > a').click(function (e) {
            e.preventDefault()
            //Save color
            currColor = $(this).css('color')
            //Add color effect to button
            $('#add-new-event').css({ 'background-color': currColor, 'border-color': currColor })
        })
        $('#add-new-event').click(function (e) {
            e.preventDefault()
            //Get value and make sure it is not null
            var val = $('#new-event').val()
            if (val.length == 0) {
                return
            }

            //Create events
            var event = $('<div />')
            event.css({
                'background-color': currColor,
                'border-color'    : currColor,
                'color'           : '#fff'
            }).addClass('external-event')
            event.html(val)
            $('#external-events').prepend(event)

            //Add draggable funtionality
            init_events(event)

            //Remove event from text input
            $('#new-event').val('')
        })
    })
</script>
<!-- jQuery 3 -->
<script src=" ${pageContext.request.contextPath}/static/adminlte/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src=" ${pageContext.request.contextPath}/static/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src=" ${pageContext.request.contextPath}/static/adminlte/dist/js/adminlte.min.js"></script>
<!-- fullCalendar -->
<script src=" ${pageContext.request.contextPath}/static/adminlte/bower_components/moment/moment.js"></script>
<script src=" ${pageContext.request.contextPath}/static/adminlte/bower_components/fullcalendar/dist/fullcalendar.min.js"></script>


<!-- jQuery UI 1.11.4 -->
<script src=" ${pageContext.request.contextPath}/static/adminlte/bower_components/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
    $.widget.bridge('uibutton', $.ui.button);
</script>

<!-- Morris.js charts -->
<script src=" ${pageContext.request.contextPath}/static/adminlte/bower_components/raphael/raphael.min.js"></script>
<script src=" ${pageContext.request.contextPath}/static/adminlte/bower_components/morris.js/morris.min.js"></script>
<!-- Sparkline -->
<script src=" ${pageContext.request.contextPath}/static/adminlte/bower_components/jquery-sparkline/dist/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src=" ${pageContext.request.contextPath}plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src=" ${pageContext.request.contextPath}plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart -->
<script src=" ${pageContext.request.contextPath}bower_components/jquery-knob/dist/jquery.knob.min.js"></script>
<!-- daterangepicker -->
<script src=" ${pageContext.request.contextPath}/static/adminlte/bower_components/moment/min/moment.min.js"></script>
<script src=" ${pageContext.request.contextPath}/static/adminlte/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- datepicker -->
<script src=" ${pageContext.request.contextPath}/static/adminlte/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src=" ${pageContext.request.contextPath}plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll -->
<script src=" ${pageContext.request.contextPath}/static/adminlte/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src=" ${pageContext.request.contextPath}/static/adminlte/bower_components/fastclick/lib/fastclick.js"></script>

<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src=" ${pageContext.request.contextPath}/static/adminlte/dist/js/pages/dashboard.js"></script>
<!-- AdminLTE for demo purposes -->
<script src=" ${pageContext.request.contextPath}/static/adminlte/dist/js/demo.js"></script>
</body>


<%@include file="common/adminFooter.jsp" %>

